package apitest

const reportTemplate = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
    <script src="https://bramp.github.io/js-sequence-diagrams/js/sequence-diagram-min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
    <style>
        body {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        #scroll-to-top-button {
            background-color: #555;
            border: none;
            border-radius: 4px;
            bottom: 20px;
            color: white;
            cursor: pointer;
            display: none;
            font-size: 18px;
            outline: none;
            position: fixed;
            right: 30px;
            z-index: 99;
        }

        .copy-to-clipboard-button {
            background-color: #fff;
            border: 1px solid #eee;
            cursor: pointer;
            font-size: 12px;
            outline: none;
            padding: 5px;
        }
    </style>
</head>
<body>
<!-- THIS CODE IS AUTOGENERATED. DO NOT EDIT -->
<div class="container-fluid">
    <h2>{{printf "%.100s" .Title }}</h2>
    <span class="{{ .BadgeClass }}">{{ .StatusCode }}</span>
    <p class="lead">{{ .SubTitle }}</p>
    <div class="card text-center">
        <div class="card-body">
            <div id="d" class="justify-content-center"></div>
        </div>
    </div>
    <br><br>
    <p class="lead">Event Log</p>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Payload</th>
        </tr>
        </thead>
        <tbody>
        {{ range $i, $e := .LogEntries }}
        <tr id="log-{{$i}}">
            <th scope="row">{{ inc $i }}</th>
            <td>
                <pre>{{ $e.Header }}</pre>
                {{if $e.Body }}
                    <pre style="max-height: 1000px; margin-bottom: 0; border: 1px solid #eee;"><code id="event-message-{{$i}}">{{ $e.Body }}</code></pre>
                    <button class="copy-to-clipboard-button" data-clipboard-target="#event-message-{{$i}}">copy to clipboard</button>
                {{end}}
            </td>
        </tr>
        {{ end }}
        </tbody>
    </table>
</div>
<button onclick="topFunction()" id="scroll-to-top-button" title="Go to top">Back to top</button>
<script>
    Diagram.parse("{{ .WebSequenceDSL }}").drawSVG("d", {theme: 'simple', 'font-size': 14});
</script>
<style>
    
</style>
{{if $.MetaJSON }}<script type="application/json" id="metaJson">{{$.MetaJSON}}</script>{{end}}
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>new ClipboardJS('.copy-to-clipboard-button');</script>
<script>
    var elements = document.getElementsByTagName('text')
    var regex = /\((\d{1,3})\)/ // match elements containing (0), (1), etc.
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].innerHTML) {
            var found = elements[i].innerHTML.match(regex);
            if (found && found.length > 0) {
                const logIndex = parseInt(found[1], 10) - 1;
                elements[i].style.cursor = 'pointer';
                elements[i].addEventListener('click', function (e) {
                    e.preventDefault();
                    document.getElementById("log-" + logIndex).scrollIntoView();
                }, false);
            }
        }
    }

    var scrollToTopBtn = document.getElementById("scroll-to-top-button");
    window.onscroll = function () {
        scrollFunction()
    };
    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            scrollToTopBtn.style.display = "block";
        } else {
            scrollToTopBtn.style.display = "none";
        }
    }

    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>
</body>
</html>`
